<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>超详细备婚时间表</title>
  <script src="../css/tailwind3.4.17.css"></script>
  <link href="../css/all.min.css" rel="stylesheet">
  <style>
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .timeline-dot::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #D4AF37;
      left: -10px;
      top: 24px;
      z-index: 10;
    }
    
    .timeline-line::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #C41E3A;
      left: 0;
      top: 0;
    }
    
    .completed {
      background-color: rgba(212, 175, 55, 0.1) !important;
      border-left: 4px solid #D4AF37 !important;
    }
    
    .completed .fa-check-circle {
      color: #D4AF37;
    }
    
    .progress-ring {
      transform: rotate(-90deg);
    }
    
    .progress-ring-circle {
      transition: stroke-dashoffset 0.5s ease;
    }
    
    @media (max-width: 768px) {
      .timeline-line::before {
        left: 16px;
      }
      
      .timeline-line {
        padding-left: 48px;
      }
      
      .timeline-dot::before {
        left: 6px;
      }
    }
    
    /* 打印样式 */
    @media print {
      #printBtn {
        display: none !important;
      }
      
      /* 可选：优化打印样式 */
      body {
        background: white !important;
      }
      
      header {
        position: static !important;
        background-color: #C41E3A !important;
      }
      
      /* 确保打印时颜色对比度足够 */
      * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
      }
    }
  </style>
</head>

<body style="background: linear-gradient(to bottom, #FFE4E1, white); min-height: 100vh; font-family: sans-serif;">
  <div id="printBtn" style="position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100; background-color: #C41E3A; color: white; padding: 12px; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer;">
    <i class="fa fa-print" style="font-size: 20px;"></i>
  </div>

  <header style="position: sticky; top: 0; z-index: 50; background-color: rgba(196, 30, 58, 0.95); color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
    <div style="max-width: 1280px; margin: 0 auto; padding: 0 16px; padding-top: 12px; padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <i class="fa fa-heart" style="color: #D4AF37; font-size: 24px; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i>
        <h1 contenteditable="true" style="font-size: 20px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">囍 备婚时间表</h1>
      </div>
    </div>
  </header>

  <section style="position: relative; overflow: hidden; background: linear-gradient(to right, #8B0000, #C41E3A); color: white; padding-top: 40px; padding-bottom: 60px;">
    <div style="position: absolute; inset: 0; opacity: 0.2;">
      <div style="position: absolute; top: 20px; left: 20px; font-size: 60px; transform: rotate(12deg);">囍</div>
      <div style="position: absolute; bottom: 20px; right: 20px; font-size: 60px; transform: rotate(-12deg);">囍</div>
      <div style="position: absolute; top: 33.333%; right: 15%; font-size: 40px; transform: rotate(45deg);">囍</div>
      <div style="position: absolute; bottom: 33.333%; left: 15%; font-size: 40px; transform: rotate(-45deg);">囍</div>
    </div>
    
    <div style="max-width: 1280px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 10;">
      <div style="max-width: 480px; margin: 0 auto; text-align: center;">
        <h2 contenteditable="true" style="font-size: clamp(1.5rem, 4vw, 2.5rem); font-family: KaiTi, STKaiti, serif; font-weight: bold; margin-bottom: 12px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);">
          超详细备婚时间表
        </h2>
        <p contenteditable="true" style="font-size: clamp(0.9rem, 2vw, 1.1rem); margin-bottom: 24px; opacity: 0.9;">
          让你的婚礼完美无缺
        </p>
        <div style="position: relative; display: inline-block;">
          <img src="../img/BG-ValentinesDay.png" alt="婚礼剪影" style="border-radius: 8px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25); width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;">
          <div style="position: absolute; bottom: -12px; right: -12px; background-color: #D4AF37; color: #8B0000; padding: 6px 12px; border-radius: 6px; font-weight: bold; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);">
            <span contenteditable="true">幸福启程</span>
          </div>
        </div>
      </div>
    </div>
    
    <div style="position: absolute; bottom: 0; left: 0; right: 0;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" style="width: 100%; height: auto; fill: white;">
        <path d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,80L1380,80C1320,80,1200,80,1080,80C960,80,840,80,720,80C600,80,480,80,360,80C240,80,120,80,60,80L0,80Z"></path>
      </svg>
    </div>
  </section>

  <section id="progressSection" style="padding-top: 30px; padding-bottom: 30px; max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px;">
    <div style="background-color: white; border-radius: 12px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); padding: 20px; max-width: 680px; margin: 0 auto; border: 2px solid rgba(212, 175, 55, 0.3);">
      <h3 contenteditable="true" style="font-size: 20px; font-family: KaiTi, STKaiti, serif; color: #8B0000; text-align: center; margin-bottom: 20px;">筹备进度概览</h3>
      <div style="display: flex; flex-direction: column; gap: 16px; align-items: center;">
        <div style="display: flex; justify-content: space-around; width: 100%; flex-wrap: wrap; gap: 20px;">
          <div style="text-align: center;">
            <div style="position: relative; width: 80px; height: 80px;">
              <svg class="progress-ring" width="80" height="80">
                <circle class="progress-ring-circle" stroke="#FFE4E1" stroke-width="6" fill="transparent" r="34" cx="40" cy="40"/>
                <circle class="progress-ring-circle" stroke="#C41E3A" stroke-width="6" fill="transparent" r="34" cx="40" cy="40" stroke-dasharray="214" stroke-dashoffset="0" id="overallProgress"/>
              </svg>
              <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 16px; color: #C41E3A;">
                <span id="progressPercent">0</span>%
              </div>
            </div>
            <p style="margin-top: 6px; font-weight: bold; font-size: 14px;">总体进度</p>
          </div>
          <div style="text-align: center;">
            <div style="position: relative; width: 80px; height: 80px;">
              <svg class="progress-ring" width="80" height="80">
                <circle class="progress-ring-circle" stroke="#FFE4E1" stroke-width="6" fill="transparent" r="34" cx="40" cy="40"/>
                <circle class="progress-ring-circle" stroke="#D4AF37" stroke-width="6" fill="transparent" r="34" cx="40" cy="40" stroke-dasharray="214" stroke-dashoffset="0" id="completedTasks"/>
              </svg>
              <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 16px; color: #D4AF37;">
                <span id="completedCount">0</span>/<span id="totalTasks">0</span>
              </div>
            </div>
            <p style="margin-top: 6px; font-weight: bold; font-size: 14px;">已完成任务</p>
          </div>
        </div>
        <div style="width: 100%;">
          <div style="display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px;">
            <span>剩余时间</span>
            <span id="daysLeftOverview" style="color: #C41E3A; font-weight: bold;">-- 天</span>
          </div>
          <div style="height: 6px; background-color: #FFE4E1; border-radius: 3px; overflow: hidden;">
            <div id="timeProgressBar" style="height: 100%; background-color: #C41E3A; width: 0%;"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="weddingDateSection" style="padding-top: 30px; padding-bottom: 30px; max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px;">
    <div style="background-color: white; border-radius: 12px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); padding: 20px; max-width: 480px; margin: 0 auto; border: 2px solid rgba(212, 175, 55, 0.3);">
      <h3 contenteditable="true" style="font-size: 20px; font-family: KaiTi, STKaiti, serif; color: #8B0000; text-align: center; margin-bottom: 20px;">设置你的婚期</h3>
      <div style="display: flex; flex-direction: column; gap: 16px; align-items: center;">
        <input type="date" id="weddingDate" style="flex: 1; padding: 12px; border: 2px solid rgba(196, 30, 58, 0.5); border-radius: 8px; outline: none; min-width: 0; width: 100%; font-size: 16px;">
        <button id="calcBtn" style="background-color: #C41E3A; color: white; padding-left: 20px; padding-right: 20px; padding-top: 12px; padding-bottom: 12px; border-radius: 8px; font-weight: bold; transition: background-color 0.2s; font-size: 16px;">
          <span contenteditable="true">计算倒计时</span>
        </button>
      </div>
      <div id="countdownResult" style="margin-top: 20px; text-align: center; display: none;">
        <p style="font-size: 16px; color: #4B5563;"><span contenteditable="true">距离你的婚礼还有</span> <span id="daysLeft" style="color: #C41E3A; font-weight: bold; font-size: 20px; margin-left: 6px; margin-right: 6px;">0</span> <span contenteditable="true">天</span></p>
      </div>
    </div>
  </section>

  <section style="max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; padding-top: 30px; padding-bottom: 30px;">
    <div style="max-width: 680px; margin: 0 auto;">
      <div style="position: relative; padding-left: 32px;" class="timeline-line">
        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-8-12">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 8-12 个月</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">核心规划期</span>
            </div>
            <div style="padding: 16px;">
              <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;">
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-money" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">确定预算</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">按场地40%、人员20%、服饰15%、用品10%、应急15%比例拆分</p>
                  <button class="complete-btn" data-task="budget" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-paint-brush" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">选定风格</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">中式、西式、森系、复古等，确认是否为目的地婚礼</p>
                  <button class="complete-btn" data-task="style" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
              </div>
              <div style="background-color: rgba(255, 228, 225, 0.3); padding: 10px; border-radius: 6px; position: relative;">
                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                  <i class="fa fa-list" style="color: #D4AF37;"></i>
                  <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">宾客名单</h4>
                </div>
                <p contenteditable="true" style="font-size: 13px; color: #4B5563;">按"必须邀请"、"可邀请"、"备选"分类，估算人数</p>
                <button class="complete-btn" data-task="guest-list" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                  <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms 100ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-6-8">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 6-8 个月</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">关键预订期</span>
            </div>
            <div style="padding: 16px;">
              <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;">
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-map-marker" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">预订场地</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">确认容量、档期、进场时间、餐饮服务，签订合同</p>
                  <button class="complete-btn" data-task="venue" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-dress" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">婚纱礼服</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">挑选主纱、敬酒服、出门纱，新郎西装，伴郎伴娘服</p>
                  <button class="complete-btn" data-task="dress" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
              </div>
              <div style="background-color: rgba(255, 228, 225, 0.3); padding: 10px; border-radius: 6px; position: relative;">
                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                  <i class="fa fa-diamond" style="color: #D4AF37;"></i>
                  <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">婚戒选购</h4>
                </div>
                <p contenteditable="true" style="font-size: 13px; color: #4B5563;">对比材质和价格，预留定制或修改尺寸的时间</p>
                <button class="complete-btn" data-task="rings" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                  <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms 200ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-4-6">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 4-6 个月</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">团队启动期</span>
            </div>
            <div style="padding: 16px;">
              <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;">
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-users" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">确定团队</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">策划师、摄影师、化妆师、司仪，查看案例并签约</p>
                  <button class="complete-btn" data-task="team" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-gift" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">婚礼用品</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">喜糖、请柬、喜糖盒，提前打印样品检查效果</p>
                  <button class="complete-btn" data-task="supplies" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms 300ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-2-3">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 2-3 个月</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">流程确认期</span>
            </div>
            <div style="padding: 16px;">
              <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;">
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-calendar-check-o" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">流程表</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">标注每个环节时间、负责人，确保衔接顺畅</p>
                  <button class="complete-btn" data-task="schedule" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
                <div style="flex: 1; background-color: rgba(255, 228, 225, 0.5); padding: 10px; border-radius: 6px; position: relative;">
                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;">
                    <i class="fa fa-envelope" style="color: #D4AF37;"></i>
                    <h4 contenteditable="true" style="font-weight: bold; font-size: 14px;">发送请柬</h4>
                  </div>
                  <p contenteditable="true" style="font-size: 13px; color: #4B5563;">注明时间、地点、导航链接，收集出席反馈</p>
                  <button class="complete-btn" data-task="invitations" style="position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;">
                    <i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms 400ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-1-2">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 1-2 个月</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">细节完善期</span>
            </div>
            <div style="padding: 16px;">
              <p contenteditable="true" style="text-align: center; color: #6B7280; padding-top: 12px; padding-bottom: 12px; font-size: 14px;">婚纱试穿调整、婚车确认、应急物品准备、流程彩排...</p>
            </div>
          </div>
        </div>

        <div class="timeline-item" style="margin-bottom: 32px; position: relative; opacity: 0; transform: translateY(32px); transition: all 700ms 500ms;" data-timeline>
          <div style="background-color: white; border-radius: 8px; box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1); overflow: hidden; border-left: 4px solid #C41E3A;" id="timeline-1-30">
            <div style="background-color: #C41E3A; color: white; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;">
              <h3 contenteditable="true" style="font-size: 18px; font-family: KaiTi, STKaiti, serif; font-weight: bold;">婚礼前 1-30 天</h3>
              <span contenteditable="true" style="background-color: #D4AF37; color: #8B0000; padding-left: 10px; padding-right: 10px; padding-top: 4px; padding-bottom: 4px; border-radius: 9999px; font-size: 12px; font-weight: bold;">最终确认期</span>
            </div>
            <div style="padding: 16px;">
              <p contenteditable="true" style="text-align: center; color: #6B7280; padding-top: 12px; padding-bottom: 12px; font-size: 14px;">供应商最终确认、场地检查、座位安排、婚前准备...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; justify-content: center; align-items: center;">
    <div style="background-color: white; padding: 20px; border-radius: 8px; max-width: 280px; width: 80%; text-align: center;">
      <h3 style="font-size: 18px; color: #C41E3A; margin-bottom: 12px;">提示</h3>
      <p id="modalMessage" style="margin-bottom: 20px; font-size: 14px;">请选择一个未来的日期作为婚期</p>
      <button id="modalClose" style="background-color: #C41E3A; color: white; padding: 8px 16px; border-radius: 4px; font-weight: bold; font-size: 14px;">确定</button>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const timelineItems = document.querySelectorAll('[data-timeline]');
      const modal = document.getElementById('modal');
      const modalMessage = document.getElementById('modalMessage');
      const modalClose = document.getElementById('modalClose');
      const completeButtons = document.querySelectorAll('.complete-btn');
      const printBtn = document.getElementById('printBtn');
      
      let completedTasks = JSON.parse(localStorage.getItem('completedTasks')) || [];
      let weddingDate = localStorage.getItem('weddingDate');
      
      if (weddingDate) {
        document.getElementById('weddingDate').value = weddingDate;
        updateCountdown();
      }
      
      updateTaskStatus();
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
          }
        });
      }, { threshold: 0.1 });
      
      timelineItems.forEach(item => {
        observer.observe(item);
      });
      
      document.getElementById('calcBtn').addEventListener('click', function() {
        const weddingDateInput = document.getElementById('weddingDate').value;
        const today = new Date();
        const selectedDate = new Date(weddingDateInput);
        
        if (weddingDateInput && selectedDate > today) {
          localStorage.setItem('weddingDate', weddingDateInput);
          updateCountdown();
        } else {
          modalMessage.textContent = '请选择一个未来的日期作为婚期';
          modal.style.display = 'flex';
        }
      });
      
      completeButtons.forEach(button => {
        button.addEventListener('click', function() {
          const taskId = this.getAttribute('data-task');
          const taskElement = this.parentElement;
          
          if (completedTasks.includes(taskId)) {
            completedTasks = completedTasks.filter(id => id !== taskId);
            taskElement.classList.remove('completed');
            this.innerHTML = '<i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>';
          } else {
            completedTasks.push(taskId);
            taskElement.classList.add('completed');
            this.innerHTML = '<i class="fa fa-check-circle" style="font-size: 18px; color: #D4AF37;"></i>';
          }
          
          localStorage.setItem('completedTasks', JSON.stringify(completedTasks));
          updateProgress();
        });
      });
      
      printBtn.addEventListener('click', function() {
        window.print();
      });
      
      modalClose.addEventListener('click', function() {
        modal.style.display = 'none';
      });
      
      modal.addEventListener('click', function(e) {
        if (e.target === modal) {
          modal.style.display = 'none';
        }
      });
      
      function updateCountdown() {
        const weddingDateInput = document.getElementById('weddingDate').value;
        const weddingDate = new Date(weddingDateInput);
        const today = new Date();
        
        if (weddingDate && weddingDate > today) {
          const diffTime = weddingDate - today;
          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
          
          document.getElementById('daysLeft').textContent = diffDays;
          document.getElementById('daysLeftOverview').textContent = diffDays + ' 天';
          document.getElementById('countdownResult').style.display = 'block';
          
          const totalDays = 365;
          const daysPassed = totalDays - diffDays;
          const progressPercentage = Math.min(100, Math.max(0, (daysPassed / totalDays) * 100));
          document.getElementById('timeProgressBar').style.width = progressPercentage + '%';
          
          setTimeout(() => {
            document.querySelector('.timeline-item').scrollIntoView({ behavior: 'smooth' });
          }, 500);
        }
      }
      
      function updateTaskStatus() {
        completeButtons.forEach(button => {
          const taskId = button.getAttribute('data-task');
          const taskElement = button.parentElement;
          
          if (completedTasks.includes(taskId)) {
            taskElement.classList.add('completed');
            button.innerHTML = '<i class="fa fa-check-circle" style="font-size: 18px; color: #D4AF37;"></i>';
          } else {
            taskElement.classList.remove('completed');
            button.innerHTML = '<i class="fa fa-check-circle-o" style="font-size: 18px; color: #C41E3A;"></i>';
          }
        });
        
        updateProgress();
      }
      
      function updateProgress() {
        const totalTasks = completeButtons.length;
        const completedCount = completedTasks.length;
        const progressPercentage = Math.round((completedCount / totalTasks) * 100);
        
        document.getElementById('completedCount').textContent = completedCount;
        document.getElementById('totalTasks').textContent = totalTasks;
        document.getElementById('progressPercent').textContent = progressPercentage;
        
        const circumference = 2 * Math.PI * 34;
        const offset = circumference - (progressPercentage / 100) * circumference;
        document.getElementById('overallProgress').style.strokeDashoffset = offset;
        document.getElementById('completedTasks').style.strokeDashoffset = circumference - (completedCount / totalTasks) * circumference;
      }
    });
  </script>
</body>
</html>